<script>
import clickOutSide from '@/utils/clickOutSide'
import dataTable from '@/components/DataTable'

export default {
  data() {
    return {
      data: {
        name: '',
        row: {}
      },
      cacheName: '',
      form: {},
      showSearchPanel: false,
      showDialogPanel: false
    }
  },
  computed: {
    hasValue() {
      return !!this.data.name
    }
  },
  props: {
    reqFn: {
      type: Function,
      required: true
    },
    showPage: {
      type: Boolean,
      default: true
    },
    params: {
      type: Object,
      default: () => ({})
    },
    keys: {
      type: Object,
      default: () => ({
        searchKey: 'likeName',
        showKey: 'name'
      })
    },
    title: {
      type: String,
      default: '请双击选择'
    },
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    beforeChange: {
      type: [Function, Boolean],
      default: true
    },
    beforeSearch: {
      type: Function,
      default: () => (true)
    }
  },
  created() {
    this.initForm()
    console.log(this.placeholder)
  },
  mounted() {
    this.initBindClick()
  },
  beforeDestroy() {
    this.initUnBind()
  },
  watch: {
    params(value) {
      console.log(value)
      this.$nextTick(() => {
        this.initForm()
      })
    }
  },
  methods: {
    initForm() {
      const defaultForm = {
        pageSize: 100000
      };
      defaultForm[this.keys.searchKey] = ''
      this.form = {
        ...defaultForm,
        ...this.params
      }
    },
    // 查询
    handleSearch(e) {
      if (!this.beforeSearch()) {
        return
      }
      !this.showSearchPanel && this.handleShowSearchPanel() // 控制查询面板显示
      this.form[this.keys.searchKey] = e.target.value // table params 赋值
      this.data.name = e.target.value
      this.tableReload()
    },
    // 刷新查询面板数据
    tableReload() {
      this.$refs.table && this.$refs.table.reload()
    },
    // 弹窗查询
    dialogReload() {
      // console.log(this.$refs.dialog)
      console.log('12312312', this.params)
      this.$refs.dialog && this.$refs.dialog.reload()
    },
    // 设置内容
    setVal(val, row) {
      this.data.name = val + ''
      this.data.row = row || {}
    },
    // 清除内容
    clearVal() {
      if (typeof this.beforeChange === 'function') {
        this.beforeChange(() => {
          this.setVal('')
          this.$emit('change')
        })
      } else {
        this.setVal('')
        this.$emit('change')
      }
    },
    // 选中行
    handleChangeRow({row}) {
      console.log(row)
      // 赋值前的操作
      if (typeof this.beforeChange === 'function') {
        this.beforeChange(() => {
          this.setVal(row[this.keys.showKey])
          this.data.row = row
          this.$emit('change', row)
          this.showSearchPanel && this.handleHideSearchPanel()
          this.showDialogPanel && this.handleHideDialogPanel()
        })
      } else {
        this.setVal(row[this.keys.showKey])
        this.data.row = row
        this.$emit('change', row)
        this.showSearchPanel && this.handleHideSearchPanel()
        this.showDialogPanel && this.handleHideDialogPanel()
      }
      this.cacheName = row[this.keys.showKey]
    },
    // 隐藏查询面板
    handleHideSearchPanel() {
      this.showSearchPanel = false
    },
    // 显示查询面板
    handleShowSearchPanel() {
      this.showSearchPanel = true
    },
    initBindClick() {
      clickOutSide.bind(this.$el, this.handleHideSearchPanel, this.$vnode)
    },
    initUnBind() {
      clickOutSide.unbind(this.$el)
    },
    handleHideDialogPanel() {
      this.showDialogPanel = false
      this.$emit('hideDialog') // dialog隐藏时应该重置params
    },
    handleShowDialogPanel() {
      if (!this.beforeSearch()) {
        return
      }
      !this.disabled && (this.showDialogPanel = true)
    },
    handleBlur() {
      if (Object.keys(this.data.row).length === 0) {
        // 如果没选择值, 就清空输入框
        this.data.name = ''
      } else {
        // 如果有值就赋值已有的名称
        this.data.name = this.cacheName
      }
    }
  },
  render() {
    const {
      hasValue, handleSearch, handleBlur, handleShowDialogPanel, reqFn, handleChangeRow,
      handleHideSearchPanel, showSearchPanel, form, showDialogPanel, params, showPage, disabled, placeholder
    } = this
    return (
      <span class="tablesSearch-wrapper" onBlur={handleHideSearchPanel} ref="wrapper">
        <el-input class="tableSearch" onChange={handleSearch} value={this.data.name} disabled={disabled}
                  onBlur={handleBlur} placeholder={placeholder}>
          <template slot="suffix">
            {hasValue && !disabled && <i class="el-icon-close icon__clear" theme="filled" onClick={this.clearVal}/>}
            <i style={{'font-size': '18px'}} class="el-icon-search icon__search" onClick={handleShowDialogPanel}/>
          </template>
        </el-input>
        {showSearchPanel && <dataTable
          reqFn={reqFn}
          ref="table"
          class="search-table"
          props={{
            props: {
              size: 'mini',
              height: 'auto',
              'max-height': '250px',
              'show-header': false,
              'highlight-hover-row': true,
              loading: false
            },
            on: {
              'cell-dblclick': handleChangeRow
            },
            showPage: false,
            params: form
          }}>
          {this.$slots.table}
        </dataTable>}
        {showDialogPanel && <el-dialog
          class="dialog-panel other-dialog"
          title={this.title}
          visible
          width='800'
          append-to-body
          onClose={this.handleHideDialogPanel}>
          {this.$slots.form && <div class="dialog-form-wrapper">
            {this.$slots.form}
          </div>}
          <dataTable
            reqFn={reqFn}
            ref="dialog"
            props={{
              props: {
                size: 'mini',
                height: '350px',
                'max-height': '350px',
                'highlight-hover-row': true,
                loading: false
              },
              on: {
                'cell-dblclick': handleChangeRow
              },
              showPage: showPage,
              params: params
            }}>
            {this.$slots.dialogTable}
          </dataTable>
        </el-dialog>}
      </span>
    )
  }
}
</script>
<style lang="scss" scoped>
.tablesSearch-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;

  .tableSearch {
    position: relative;

    .icon__clear {
      color: rgba(0, 0, 0, 0.25);
      cursor: pointer;
      display: none;
    }

    .icon__search {
      color: rgba(0, 0, 0, 0.25)
    }

    &:hover {
      .icon__clear {
        display: inline-block;
      }
    }

    .list-panel {
    }
  }

  .search-table {
    position: absolute;
    z-index: 10;
    height: auto;
    max-height: 250px;
    width: 100%;
    overflow: auto;
    top: 100%;
    left: 0;
    display: block;

    & > div {
      white-space: nowrap;

    }
  }

  .dialog-form-wrapper {
    margin-bottom: 10px;
  }
}

</style>
<style lang="scss">
.tablesSearch-wrapper {
  .tableSearch {
    .ant-input {
      line-height: 32px;
    }

    .ant-input-suffix {
      height: 100%;
      line-height: 32px;
      right: 0;
      top: 50%;

      i {
        padding-right: 5px;
        vertical-align: middle;
      }
    }
  }

  .search-table {
    .vxe-table--body-wrapper {
      height: auto !important;
    }
  }
}

</style>
